<template>
    <h1>父子组件方法，参数传递</h1>
    <div>
        {{ msg }}
    </div>
    <div>
        {{ data }}
        <br>
        年龄：{{ age }}
    </div>
    <div>{{ props }}</div>
    <button @click="addAge">增加年龄</button>
    <button @click="changeCity">改变城市</button>
</template>

<script setup>
import { reactive, ref, toRefs } from 'vue'

const props = defineProps({
    city: String,
})
const emits = defineEmits(['changeMsg'])

const msg = ref('消息')
const data = reactive({
    name: '姓名',
    age: 20,
    sex: '男'
})
const { name, age, sex } = toRefs(data)

const changeCity = () => {
    emits('changeMsg', '泰安市')
}


const addAge = () => {
    data.age++
}

</script>

<style lang="scss" scoped>
div {
    margin: 20px 0;
}
</style>